<template>
  <div class="hello">
    <el-switch
      v-model="value2"
      active-color="#13ce66"
      inactive-color="#ff4949"
      @change="kaiguan">
    </el-switch>
    <home31 v-show="isShow1"></home31>
    <home32 v-show="isShow2"></home32>
    <div>
      <el-input v-model="input" placeholder="请输入内容"maxlength="12"></el-input>
      <span>{{input}}</span>
    </div>
  </div>
</template>

<script>
  import home31 from './home3/home31'
  import home32 from './home3/home32'
  export default {
    components: {home31,home32},
    data() {
      return {
        selected: null,
        options: ['foo','bar','baz'],
        isShow1:true,
        isShow2:true,
        value1: true,
        value2: true,
        input: ''
      }
    },
    created(){
      //this.$store.commit('set_home3isshow',false)
      //this.isShow1= this.$store.getters.get_home3isshow
      this.isShow1= false

    },
    mounted(){
      window.setTimeout(()=> {
        this.isShow1= true
      },2000)
    },
    watch:{
      value2:function(newvalue,oldvalue) {
          this.isShow1=newvalue
      }
    },
    methods:{
      kaiguan(data){
        //this.isShow1= this.value2

        //console.log(data);
      }
    }


  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  div{
    text-align: left;
  }
  .el-input {
    width: 330px;
  }
</style>
